import React, { useEffect, useState } from 'react';

const Index = () => {
    let [todoList,setTodoList] = useState([])
    let [doneList,setDoneList] = useState([])
    const [msg,setMsg] = useState("")
    const handleChange = (e)=>{
        setMsg(e.target.value)
    }
    const handleKeyUp = (e)=>{
        if(e.keyCode === 13 && msg.trim()){
            setTodoList(()=>{
                todoList.push({msg,done:false})
                localStorage.setItem("todolist",JSON.stringify(todoList))
                return [...todoList]
            })
            setMsg("")
        }
    }
    const handleDelete = (msg)=>{
        setTodoList(()=>{
            todoList = todoList.filter(item=>{
                return item.msg !== msg
            })
            localStorage.setItem("todolist",JSON.stringify(todoList))
            return [...todoList]
        })
    }
    const handleSelect = (msg)=>{
        setTodoList(()=>{
            todoList = todoList.filter(item=>{
                if(item.msg === msg){
                    item.done = !item.done
                    setDoneList(()=>{
                        doneList.push(item)
                        localStorage.setItem("donelist",JSON.stringify(doneList))
                        return [...doneList]
                    })
                }
                return item.done === false
            })
            localStorage.setItem("todolist",JSON.stringify(todoList))
            return [...todoList]
        })
    }
    const DoneDelete=(msg)=>{
        setDoneList(()=>{
            doneList = doneList.filter(item=>{
                return item.msg !== msg
            })
            localStorage.setItem("donelist",JSON.stringify(doneList))
            return [...doneList]
        })
    }
    const DoneSelect= (msg)=>{
        setDoneList(()=>{
            doneList = doneList.filter(item=>{
                if(item.msg === msg){
                    item.done = !item.done
                    setTodoList(()=>{
                        todoList.push(item)
                        localStorage.setItem("todolist",JSON.stringify(todoList))
                        return [...todoList]
                    })
                }
                return item.done === true
            })
            localStorage.setItem("donelist",JSON.stringify(doneList))
            return [...doneList]
        })
    }
    useEffect(()=>{
        var todo = localStorage.getItem("todolist")
        var done = localStorage.getItem("donelist")
        setTodoList(JSON.parse(todo))
        setDoneList(JSON.parse(done))
    },[])
    return (
        <div>
            <input type="text" value={msg} onChange={handleChange} onKeyUp={handleKeyUp}/>
            <div>未完成{todoList.length}</div>
            {todoList.map(item=>{
                return (
                    <div key={item.msg}>
                        <input type="checkbox" checked={item.done} onChange={()=>handleSelect(item.msg)}/>
                        <span onClick={()=>handleDelete(item.msg)}>{item.msg}</span>
                    </div>
                )
            })}
            <div>已完成{doneList.length}</div>
            {doneList.map(item=>{
                return (
                    <div key={item.msg}>
                        <input type="checkbox" checked={item.done} onChange={()=>DoneSelect(item.msg)}/>
                        <span onClick={()=>DoneDelete(item.msg)}>{item.msg}</span>
                    </div>
                )
            })}
        </div>
    );
}

export default Index;
